<template>
  <div id="app">
    <root name="network">
      <SafeHeader
        v-bind="{
          title: $t('base.setting_network'),
          fixedTop: true,
          isBack: true,
          returnIndex: false,
        }"
      >
        <template v-slot:right>
          <v-btn text @click="save()" class="px-0" small>{{
            $t("base.save")
          }}</v-btn>
        </template>
      </SafeHeader>
      <div>
        <v-list>
          <v-radio-group v-model="selectedIndex">
            <div v-for="(item, index) of network" :key="index">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
              <v-list-item button :ripple="false">
                <v-row class="ma-0 pa-0">
                  <v-col cols="3" class="pa-1 d-flex align-center"
                    >协议：</v-col
                  >
                  <v-col class="pa-1">
                    <v-text-field
                      hide-details
                      dense
                      full-width
                      class
                      placeholder
                      v-model="item.protocol"
                    ></v-text-field
                  ></v-col>
                </v-row>
              </v-list-item>
              <v-list-item button :ripple="false">
                <v-row class="ma-0 pa-0">
                  <v-col cols="3" class="pa-1 d-flex align-center">ip：</v-col>
                  <v-col class="pa-1">
                    <v-text-field
                      hide-details
                      dense
                      full-width
                      class
                      placeholder
                      v-model="item.ip"
                    ></v-text-field
                  ></v-col>
                </v-row>
              </v-list-item>
              <v-list-item button :ripple="false">
                <v-row class="ma-0 pa-0">
                  <v-col cols="3" class="pa-1 d-flex align-center"
                    >{{ $t("base.port") }}：</v-col
                  >
                  <v-col class="pa-1">
                    <v-text-field
                      hide-details
                      dense
                      full-width
                      class
                      placeholder
                      v-model="item.port"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-list-item>
              <v-list-item button :ripple="false">
                <v-row class="ma-0 pa-0">
                  <v-col cols="3" class="pa-1 d-flex align-center"
                    >{{ $t("base.application_name") }}：</v-col
                  >
                  <v-col class="pa-1">
                    <v-text-field
                      hide-details
                      dense
                      full-width
                      class
                      placeholder
                      v-model="item.appName"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-list-item>
              <v-list-item button :ripple="false" style="mt-2">
                <v-row class="ma-0 pa-0">
                  <v-col cols="7" class="pa-1 d-flex align-center">
                    <v-radio
                      :value="index"
                      :label="$t('base.set_default')"
                    ></v-radio>
                  </v-col>
                  <v-col class="pa-1">
                    <v-btn color="#193690" @click="check(item)" dark small>{{
                      $t("base.network_test")
                    }}</v-btn>
                  </v-col>
                </v-row>
              </v-list-item>
            </div>
          </v-radio-group>
        </v-list>
      </div>
      <v-dialog v-model="dialog" width="500" max-width="80%">
        <v-card>
          <v-card-title>提示</v-card-title>
          <v-card-text>
            <v-row class="ma-0 align-center flex-nowrap">
              <v-icon size="30" color="#F8A73C" class="mr-2">{{
                mdiExclamation
              }}</v-icon>
              <div>{{ $t("message.message_network_nocheck") }}</div>
            </v-row>
          </v-card-text>
          <v-card-actions class="justify-end">
            <v-btn text @click="dialog = !dialog">取消</v-btn>
            <v-btn text color="#193690" @click="dialog = !dialog">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </root>
  </div>
</template>
<script>
import { mdiExclamation } from "@mdi/js";
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
import Storage from "../../utils/storage.js";

export default {
  name: "network",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      mdiExclamation: mdiExclamation,
      dialog: false,
      network: [
        {
          title: this.$i18n.t("network.network_one"),
          protocol: "http",
          ip: "192.168.100.171",
          port: "8913",
          appName: "wms",
          save: true,
          checked: false,
        },
        // {
        //   title: this.$i18n.t("network.network_two"),
        //   protocol: "http",
        //   ip: "10.1.1.190",
        //   port: "8080",
        //   appName: "uma-exception-mars",
        //   save: true,
        //   checked: false,
        // },
      ],
      selectedIndex: 0,
    };
  },
  methods: {
    check(item) {
      if (!item.ip) {
        this.$message.alert(
          this.$i18n.t("message.message_network_noip"),
          this.$i18n.t("base.prompt")
        );
        return false;
      }
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.checkNetwork(item).then((res) => {
          if (res.status == true) {
            item.checked = true;
            this.$toast.success({
              message: this.$i18n.t("message.message_network_success"),
              close: false,
            });
          } else {
            this.$toast(this.$i18n.t("message.message_network_error"), {
              color: "error",
            });
          }
        });
      }
    },
    save() {
      console.log(this);
      let selectedNetwork = this.network[this.selectedIndex];
      if (selectedNetwork.checked) {
        this.saveStorage();
      } else {
        this.$message
          .confirm(
            this.$i18n.t("message.message_network_nocheck"),
            this.$i18n.t("base.prompt"),
            {
              type: "warning",
              okLabel: this.$i18n.t("base.confirm"), // 对话框确定按钮文字
              cancelLabel: this.$i18n.t("base.cancel"), // 对话框取消按钮文字
            }
          )
          .then(({ result }) => {
            if (result) {
              this.saveStorage();
            }
          });
      }
    },
    saveStorage() {
      Storage.setObject("network", this.network);
      Storage.setItem("selectedIndex", this.selectedIndex);
      console.log(window);
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: "login_wms",
          url: "./login_wms.html",
          pageParam: {
            name: "test",
          },
          progress: {
            type: "default",
          },
        });
      } else {
        this.$root.api.api.openWin({
          name: "login_wms",
          url: "./login_wms.html",
          pageParam: {
            name: "test",
          },
          progress: {
            type: "default",
          },
        });
      }
    },
  },
  mounted: function () {
    //从LocalStrong中拿到在登陆页面选择的语言类型
    if (!Storage.getObject("lang")) {
      Storage.setObject("lang", {
        label: "中文",
        selected: false,
        value: "cn",
      });
    }
    let lang = Storage.getObject("lang").value;
    if (lang) {
      this.$i18n.locale = lang;
    } else {
      this.$i18n.locale = "cn";
    }

    let network = Storage.getObject("network");
    let selectedIndex = Storage.getItem("selectedIndex");
    if (network) {
      this.network = network;
      this.network[0].title = this.$i18n.t("network.network_one");
      this.network[1].title = this.$i18n.t("network.network_two");
    }
    if (selectedIndex) {
      this.selectedIndex = Number(selectedIndex);
    }
  },
};
</script>
<style scoped lang="scss">
.v-list .v-list-item__title:first-child {
  margin-top: 0;
  color: #2196f3;
}
.v-list-item {
  & > .v-list-item-action {
    font-size: 16px;
  }
  .v-input.full-width {
    height: 48px;
    margin: 0;
    padding: 0;
  }
}
</style>
